<!--Generate by Kevin's CodeBuilder 2021-09-11 18:46:15-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <head th:replace="source::header">
    </head>
    <style>
        #tree_tools div span{
            padding-left: 20px;
            cursor: pointer;
            line-height: 30px;
        }
        #tree_tools div span i{
            color: #0A03E3;
        }
        div.k_tree_clicked_cls {
            background-color: #a4c2fa !important;
        }
    </style>
</head>
<body>
    <div id="k_page_erea" class="form_main_wrap">
        <div id="k_list_erea" class="k_box_size" style="position: absolute;top:0;left:0;width: 100%;height: 100%;border-left: 350px solid #fff">
            <div class="k_form_grid">
                <table id="datagrid"></table>
            </div>
            <div class="k_form_condition" style="padding:12px 14px;border-top-left-radius:0;">
                <table class="k_form_table" id="k_form_query_wrap">
                    <tr>
                        <td class="label label100">[(${Lang.common_query_from})]</td>
                        <td><input id="keywords" name="keywords" style="width: 300px" placeholder="机构代码/名称" class="form_input" type="text" />
                            <span>
                                <button class="k_common_button" id="search_btn">
                                    <i class="fa fa-search"></i>
                                    [(${Lang.common_search})]
                                </button>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="k_box_size" style="position: absolute;overflow: hidden;top:0;left:0;width:350px;height: 100%;background-color: #F0F5FA;border-left: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;border-top-left-radius: 18px;">
            <div class="k_box_size" id="orgTreeWrap" style="width: 100%;height: 100%;overflow: hidden;position: absolute;top:0;left: 0;border-top: 30px solid #ffff;">

            </div>
            <div class="k_box_size" id="tree_tools" style="width: 100%;height: 30px;overflow: hidden;position: absolute;top:0;left: 0;border-top-left-radius: 18px;background-color: #b3e0ff;">
                <div >
                    <span><i title="新增根机构" event="addOrg" class="fa fa-plus-circled"></i></span>
                    <span><i title="编辑机构" event="editOrg" class="fa fa-pencil"></i></span>
                    <span><i title="删除机构" event="delOrg" class="fa fa-minus-circled"></i></span>
                    <span><i title="全量导入机构"  event="impAll" class="fa fa-upload-cloud-1"></i></span>
                    <span><i title="全量导出机构"  event="expAll" class="fa fa-download-cloud-1"></i></span>
                    <span><i title="刷新机构树" event="reload" class="fa  fa-spin6"></i></span>
                </div>
            </div>
        </div>
    </div>
    <script type="application/javascript" th:inline="javascript">
        var curdObj,$win,$treeObj,
            curOrgObj,
            height = 532,
            gridOpts = [(${dataGridJson})],//获取datagrid配置json
            title = "[(${Lang.org_windowTitle})]";//国际化语言
            gridOpts.title = title;


        window.updateTreeNode = function (data) {
            $treeObj.updateNode(data);
            console.log("updateTreeNode",data,curOrgObj);
            if(data.id === curOrgObj.id){
                curOrgObj.name = data.orgName;
                curdObj.updateTitle("【"+curOrgObj.name+"】下子机构");
            }

        };
        window.reloadTreeNode = function () {
            $treeObj.reloadNode();
        };

        window.closeWindow =function (pid) {
            $win.close();
            if(pid === ""){
                $treeObj.reload();
            }else{
                curdObj.reload();
            }
            $win = undefined;
        };


        function openDelWindow(prs) {
            let $c ;
            if(prs.isParent){
                $c = '<div><p style="line-height: 50px;text-align: center;"><label class="k_checkbox_label k_checkbox_anim"><input type="checkbox" id="del_all_sons" value="1"><i class="k_checkbox_i"></i>级联删除下属机构</label></p></div>';
            }else{
                $c = '<div><p style="line-height: 50px;text-align: center;">请确认删除机构？</p></div>';
            }
            $win = $B.window({
                fixed:true,
                width:400,
                iconCls:'fa-question',
                title:'请确认删除<span style="color:orangered">【'+prs.name+'】</span>?',
                content: $c,
                toolbar:{
                    align:'100%',
                    buttons:[
                        {
                            color: '#A721E5',
                            text: '删除',
                            iconCls: 'fa-cancel',
                            click:function(){
                                console.log(this);
                                if(prs.isParent){
                                    let $chk = $win.find("del_all_sons");
                                    if($B.Dom.attr($chk,"checked")){
                                        prs.delAll = 1;
                                    }
                                }
                                $B.request({
                                    url : $B.getHttpHost() + "org/delete",
                                    data:prs,
                                    ok:()=>{
                                        setTimeout(()=>{
                                             $win.close();
                                         },1);
                                        $treeObj.deleteNode(prs.id);
                                        curdObj.reload();
                                        if(prs.isParent &&  !prs.delAll ){
                                            console.log($treeObj.clickedItem);
                                            $treeObj.reloadNode();
                                        }
                                    }
                                },this);
                            }
                        },{
                            color: '#3B48D8',
                            text: '取消',
                            iconCls: 'fa-reply',
                            click:function(){
                                $win.close();
                            }
                        }
                    ]
                }
            });
        }

        var treeEvents = {
            reload:function () {
                $treeObj.reload();
            },
            expAll:function () {
                let title = '导出所有机构';
                $win = $B.window({
                    title:title,
                    width:460,
                    height:260,
                    fixed:true,
                    dataType :'iframe',
                    url:$B.getHttpHost()+"org/page/export?pid="
                });
            },
            impAll:function(){
                $win = $B.window({
                    title: '导入【所有机构】',
                    width:500,
                    height:300,
                    fixed:true,
                    dataType :'iframe',
                    url:$B.getHttpHost()+"org/page/import?pid="
                });
            },
            delOrg:function () {
                openDelWindow(curOrgObj);
            },
            addOrg:function () {
                _openForm({pid:''},false,"<span style='color:red'>新增根机构</span>");
            },
            editOrg:function () {
                _openForm({id:curOrgObj.id},true,'[(${Lang.common_update_title})]'+'【'+curOrgObj.name+'】');
            }
        };

        $B.DomUtils.onDomLoaded(function () {
           let $c =  $B.myScrollbar($B.DomUtils.findbyId("orgTreeWrap"), {
                isHide: true,
                onScrollFn: function (x, y) {
                }
            });
           $c.style.paddingRight = "9px";

           $B.Dom.click(document.getElementById("tree_tools"),(e)=>{
               let el = e.target;
               if(el.nodeName === "I"){
                   let event = $B.Dom.attr(el,"event");
                   treeEvents[event]();
               }
           });

           var $treeUl = $B.Dom.append($c,"<ul />");
           $treeObj = new $B.Tree($treeUl, {
                clickFirst:true,
                textField:'orgName',
                showLine: true,
                plainStyle: true,
                url: $B.getHttpHost() + 'org/query',
                checkbox: false,
                onClick:function(e){
                    console.log(this);
                    var data = e.data[0];
                    curOrgObj = {id:data.id,name :data.orgName ,isParent: data.orgType === 1 };
                    document.getElementById("keywords").value = "";
                    curdObj.updateTitle("【"+curOrgObj.name+"】下子机构");
                    curdObj.reload();
                },
                onLoaded:function (data) {
                    console.log(JSON.stringify( $treeObj.opts.data));
                }
            });

            var dg =  document.getElementById("datagrid");
            //设置查询参数
            gridOpts.setParams = function(params){
                let p = {pid : curOrgObj.id };
                let keywords = document.getElementById("keywords").value;
                if(keywords !== ""){
                    p.keywords = keywords;
                }
                return p;
            };
            gridOpts.title = " ";
            gridOpts.pageArea = "k_list_erea";
            gridOpts.fit2height = true;
            gridOpts.iconCls = "fa-cubes";
            gridOpts.checkBox = true;
            gridOpts.loadImd = false;
            gridOpts.oprColWidth = 100;
            gridOpts.trBtnStyle = {
                    showText: false
            };
            curdObj = new $B.CURD(dg, gridOpts);

            //输入框绑定清理按钮
            $B.bindInputClear("k_form_query_wrap");
            $B.DomUtils.click(document.getElementById("search_btn"),()=>{
                 curdObj.reload();
            });
        });
        //打开form.html
        function _openForm(prs,isUpdate,winTitle){
            var opts = {
                dataType:'html',
                title:winTitle ? winTitle:title,
                width:750,
                height:height
            };
            if(prs){
                opts.params = prs;
            }
            curdObj.window(opts,isUpdate);
        };
        /******工具栏事件集合******/
        window.buttonEvents = {
            addFn:function(prs){
                _openForm({pid: curOrgObj.id },false,"<span style='color:red'>["+curOrgObj.name+"]<span>新增下属机构</span></span>");
            },
            deleteFn:function(prs){
                openDelWindow({});
            },
            lineUpdateFn:function(prs){
                _openForm({id:prs.id},true,'[(${Lang.common_update_title})]'+'【'+prs.orgName+'】');
            },
            lineDeleteFn:function(prs){
                openDelWindow({id : prs.id ,name : prs.orgName ,isParent: prs.orgType === 1 });
            },
            importFn:function(){
                $win =  $B.window({
                    title: '导入【'+curOrgObj.name+'】的子机构',
                    width:500,
                    height:300,
                    fixed:true,
                    dataType :'iframe',
                    url:$B.getHttpHost()+"org/page/import?pid="+ curOrgObj.id
                });
            },
            exportFn:function(){
                let pid = curOrgObj.id;
                let title = '导出【'+curOrgObj.name+'及其子机构】';
                $win = $B.window({
                    title:title,
                    width:460,
                    height:260,
                    fixed:true,
                    dataType :'iframe',
                    url:$B.getHttpHost()+"org/page/export?pid="+pid
                });
            }
        };
        function formatStats(cval,rval) {
            if(cval){
                return "<span  style='color:green'>正常</span>";
            }
            return "<span style='color:red'>关闭</span>";
        }
    </script>
</body>
</html>
